<template>
	<view>
		<u-navbar :border-bottom="false" :background="{backgroundColor: '#FFFFFF'}" back-icon-color='#333333'>
			<u-search placeholder="请输入公司/城市/持有人" v-model="keyword" @search="goToSearch" @custom="goToSearch"
				:focus="true"></u-search>
		</u-navbar>
		<view class="search-view">
			搜索历史
			<u-icon name="trash-fill" size="40" @click="clearTrash"></u-icon>
		</view>
		<view class="slot-content">
			<view class="item-box">
				<view class="item" v-for="(item, index) in trashArray" :key="index" @tap="tagClick(index)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				trashArray: []
			}
		},
		onLoad(e) {
			this.keyword = e.keyword
			this.trashArray = uni.getStorageSync('property_trashArray') || []
		},
		methods: {
			goToSearch() {
				if (this.keyword != '' && this.keyword != null) {
					var a = uni.getStorageSync('property_trashArray') || []
					var j = 0
					var baohan = false
					for (var i = 0; i < a.length; i++) {
						if (a[i] == this.keyword) {
							j = i
							baohan = true
						}
					}
					if (baohan) {
						a.splice(j, 1)
						a.splice(0, 0, this.keyword)
					} else {
						a.push(this.keyword)
					}
					uni.setStorage({
						key: 'property_trashArray',
						data: a,
						success: () => {
							let pages = getCurrentPages()
							let prevPage = pages[pages.length - 2]
							prevPage.$vm.keyword = this.keyword
							prevPage.$vm.goToSearch()
							uni.navigateBack()
						}
					})
				} else {
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2]
					prevPage.$vm.keyword = this.keyword
					prevPage.$vm.goToSearch()
					uni.navigateBack()
				}
			},
			tagClick(e) {
				this.keyword = this.trashArray[e]
			},
			clearTrash() {
				this.trashArray = []
				uni.setStorage({
					key: 'property_trashArray',
					data: []
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.search-view {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.slot-content {
		padding-left: 30rpx;

		.item-box {
			margin-bottom: 30rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.item {
			color: #000000;
			background-color: #F6F6F6;
			padding: 8rpx 40rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;
			margin-right: 30rpx;
		}
	}
</style>
